<extend name="./Public/Home/master.html" />
<block name="title" >
    </div>
    <!--导航结束-->
    <div class="clear"></div>

    </div>
    <!--头部结束-->
    <!--中间开始-->
    <div id="content">

        <div class="cont">
            <div class="main">
                <div class="content-left">
                    <div class="box">
                        <div class="zhezhao"></div>
                        <div class="sekuai"></div>
                        <div class="smallTu"></div>
                        <a href="javascript:;" class="shang">&lt;</a>
                        <div class="list1">

                            <ul>
                                <volist name="data['medium']" id="vo">
                                    <li><img src="__ROOT__/{$vo}" alt=""></li>
                                </volist>
                            </ul>

                        </div>
                        <a href="javascript:;" class="xia">&gt;</a>

                        <div class="bgTu"></div>
                        <div class="bgTuHide">
                            <ul>
                                <volist name="data['big']" id="vo">
                                    <li><img src="__ROOT__/{$vo}" alt=""></li>
                                </volist>
                            </ul>

                        </div>
                    </div>
                </div>
                <div class="content-right">

                    <div class="tit">{$data['gname']}</div>
                    <!--<div class="description">安全三系统 6GB内存+128GB存储 高通骁龙820芯片 智慧双摄2.0 银行级安全芯片 360OS 2.0 QC闪充3.0</div>-->
                    <div class="pirve">￥ {$data['shopprice']}</div>
                   <foreach name="temp" item="vo" key="k">
                    <div class="category">
                        <h4>{$k}</h4>
                        <ul>
                            <foreach name="vo" item="m" >
                                <li gtid="{$m['gtid']}" taname="{$k}">{$m['gtvalue']}</li>
                            </foreach>

                        </ul>
                    </div>
                   </foreach>

                    <!--商品规格异步操作开始-->
                    <script>
                        $(function () {
//                            给category(规格)加异步判断必须全部选中才能发异步
                             $('.category li').click(function(){ //给li加单击事件
//                               规格属性必须全部选中才能发ajax
                                 var len =<?php echo count($temp)?>;
                                 if($('.zhong').length!=len){
                                     return false;

                                 }
//                                 异步获取货品数量
                                 var gid = {$Think.get.gid};
                                 var grid = '';
//                                    遍历抓选中我们自己加的属性gtid放入变量grid中
                                      $.each($('.zhong'),function(){
                                            grid += $(this).attr('gtid')+',';
                                      });
//                                      发送ajax
                                    $.post("{:U(ajaxGetTotal)}",{gid:gid,grid:grid},function(res){
                                        if(res.valid){
//                                            真就有该规格的库存
//                                            抓到显示库存标签，写入库存数
                                            $('#inventory').text('库存为:'+res.stocks);
//                                            让购物车标签由禁止到购买
                                            $('.nobdr h6').addClass('allow').removeClass('disable');
                                        }else {
//                                            该商品库存不存在
                                            $('#inventory').text('库存为: 0');
//                                            将购物车样式改为禁用
                                            $('.nobdr h6').addClass('disable').removeClass('allow');
                                        }
                                    },'json');

                             })
//
                            
                        })

                    </script>

                    <!--商品规格异步操作结束-->
                    <div class="num">
                        <h5>数量</h5>
                        <a href="javascript:;" class="num_l">-</a>
                        <input type="text" value="1" id="stocks" />
                        <a href="javascript:;" class="num_r">+</a>
                        <!--总库存状态显示-->
                        <span id="inventory" style="margin-left: 10px;line-height: 2em">库存为：{$data['stocks']}</span>
                        <!--总库存状态显示-->
                    </div>
                    <!--给购物车按钮修改样式-->
                    <style>
                        .allow{
                            background: #fa5437;
                        }
                        .disable{
                            background: #CCCCCC;
                        }
                    </style>
                    <!--给购物车按钮修改样式-->
                    <div class="nobdr">
                            <h6 class="allow"><a href="javascript:;">加入购物车</a></h6>
                    </div>
                    <link rel="stylesheet" href="__PUBLIC__/Home/layer/skin/default/layer.css">
                    <script src="__PUBLIC__/Home/layer/layer.js" type="text/javascript" charset="utf-8"></script>

                    <!--加入购物车处理-->
                    <script>
                        $(function(){
//                            给购物车加单击事件
                            $('.nobdr .allow').click(function(){
//                                判断如果购物车是灰色的就不让提交
                                if($(this).is('.disable')){
                                    return false;
                                }
//                                如果没有选择商品规格也不让提交
                                var len = <?php echo count($temp) ?>;
                                if($('.zhong').length!=len){
//                                    关闭操作
                                    layer.msg('您还没有选购任何商品',function(){
                                    });
                                    return false;
                                }

                                //组合post发送的数据：商品gid、购买数量、其他参数
                                    var data ={
                                        'gid': <?php echo $_GET['gid'] ?>,
                                        'num': $('#stocks').val(),
                                        'options': {}
                                    };
//                                获得商品属性和规格(tanme自定义的属性)
                                $.each($('.zhong'),function (k,v) {
                                    data.options[$(this).attr('taname')]=$(this).text();
                                })
//                                异步加购物车
                                $.post("{:U('ajaxAddCart')}",data,function(res){
//                                    执行异步跳转购物车
                                    location.href="{:U('Home/Cart/index')}";
                                })
                            });
                        })
                    </script>
                    <!--加入购物车处理-->

                    <div class="houdun">
                        <h3>保障</h3>
                        <p><i class="o1"></i>360商城发货&售后</p>
                        <p><i class="o2"></i>满99元包邮</p>
                        <p><i class="o3"></i>7天无理由退货</p>
                        <p><i class="o4"></i>15天免费换货</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="desc" id="xijie">
            <div class="desctab" >
                <div class="main">
                    <ul>
                        <li><a href="#xijie">产品详情</a><span>|</span></li>
                        <li><a href="#guige">规格参数</a><span>|</span></li>
                        <li><a href="#wenti">常见问题</a></li>
                    </ul>
                </div>
            </div>
            <!--商品详情和服务开始-->
            <div class="con" >
                {$data['intro']}
                {$data['service']}
            </div>
            <!--商品详情和服务结束-->

        </div>

    </div>
    </div>
    <!--中间结束-->
</block>